<script setup>
import BlogItem from './BlogItem.vue'
import { ref } from 'vue'

const count = ref(10)
const loading = ref(false)
const load = () => {
  loading.value = true
  setTimeout(() => {
    count.value += 2
    loading.value = false
  }, 2000)
}
</script>

<template>
  <div class="blog_list" v-infinite-scroll="load">
    <BlogItem
      class="blog_item"
      v-for="item in count"
      :key="item"
      @click="$router.push({ name: 'BlogDetail', params: { id: item } })"
    />
    <div class="loading" v-if="loading">加载中...</div>
  </div>
</template>

<style scoped lang="scss">
.blog_list {
  .blog_item {
    border-bottom: 1px solid #eee;

    &:last-of-type {
      border-bottom: none;
    }
  }
}
</style>
